<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/one.css" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
			$.fn.extend({
				refresh: function(option) {
					var el = $(this);
					var defaults = {
						height: 60, //设置触发下拉刷新的距离；  
						loading_text: $('.loading_text'), //设置文字容器；  
						loading_icon: $('.loading_icon'), //设置加载icon的容器；  
						coefficient: 0.5, //阻尼系数；注，阻尼系数越小，越难触发。  
						pullFunction: function() {}, //下拉刷新请求数据函数；  
					}
					var settings = $.extend(defaults, option || {}); //init  
					console.log(settings)
					var _hasPhone = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);
					var height = settings.height;
					var className = "loading_icon";
					var _hasTouch = 'ontouchstart' in window;
					var _pulldownConfig = {
						normalStatus: "下拉即可刷新",
						maxStatus: "松开立即刷新",
						releaseStatus: "正在加载…"
					};
					var _start = 0,
						_end = 0;
					var _TransitionObj = {
						translate: function(height) {
							el.css({
								"-webkit-transform": "translate(0," + height + "px)",
								"transform": "translate(0," + height + "px)"
							});
						},
						translitionTime: function(time) {
							el.css({
								"-webkit-transition": "all " + time + "s",
								"transition": "all " + time + "s"
							});
						},
						goDefault: function() {
							_TransitionObj.translitionTime(0.5);
							_TransitionObj.translate(0);
						}
					};
					var flag = true
					var _bindTouchEvents = function() {
						if(_hasPhone) {
							el.bind("touchstart", _touchstartHandler);
							el.bind("touchmove", _touchmoveHandler);
							el.bind("touchend", _touchendHandler);
						} else {
							el.bind("mousedown", _touchstartHandler);
							el.bind("mousemove", _touchmoveHandler);
							el.bind("mouseup", _touchendHandler);
						}

					};
					var _touchstartHandler = function(e) {
						flag = false;
						settings.loading_icon.removeClass(className);
						var even = typeof event == "undefined" ? e : event;
						//保存当前鼠标Y坐标  
						_start = _hasTouch ? even.touches[0].pageY : even.pageY;
						if(el.scrollTop() > 0) {
							console.log(el.scrollTop());
							//消除滑块动画时间  
							_TransitionObj.translitionTime(0);
						}
					};
					var changeHeight;
					var _touchmoveHandler = function(e) {
						if($(document).scrollTop() >= 10 || flag) {
							return
						}
						changeHeight = _end - _start;
						var even = typeof event == "undefined" ? e : event;
						//保存当前鼠标Y坐标  
						_end = _hasTouch ? even.touches[0].pageY : even.pageY;
						if(changeHeight < 0 || changeHeight > 200) {
							return
						}
						if(changeHeight * settings.coefficient > height) {
							settings.loading_text.html(_pulldownConfig.maxStatus);
						} else {
							settings.loading_text.html(_pulldownConfig.normalStatus);
						}
						even.preventDefault();
						//消除滑块动画时间  
						_TransitionObj.translitionTime(0);
						_TransitionObj.translate(changeHeight * settings.coefficient);
					};
					var back = function() {
						_TransitionObj.translate(0)
					}
					var _touchendHandler = function(e) {
						flag = true;
						if($(document).scrollTop() > 0) {
							return
						}
						//判断滑动距离是否大于等于指定值  
						if(changeHeight * settings.coefficient >= height) {
							settings.loading_icon.addClass(className);
							//设置滑块回弹时间  
							_TransitionObj.translitionTime(1);

							//设置刷新时的文字  
							settings.loading_text.html(_pulldownConfig.releaseStatus);
							//保留提示部分  
							_TransitionObj.translate(40);
							//执行回调函数  
							settings.pullFunction(3000, function() {
								_TransitionObj.translate(0)
							})

						} else {
							//返回初始状态  
							_TransitionObj.goDefault();
						}
					}
					_bindTouchEvents();
				}
			})
		</script>
	</head>

	<body>
		<div id="box">
			<div class="header">
				<span>首页</span>
				<a href="#"><img src="img/questionMark.png" /></a>
			</div>
			<div class="screen">
				<div>
					<span>推荐 <img src="img/triangle.png"/></span>
				</div>
				<p class="line"></p>
				<div id="sx">
					<span>要求 <img src="img/triangle.png"/></span>
				</div>
			</div>
			<div class="formList">
				<div class="formShadow"></div>
				<form action="" method="post">
					<div>
						<span>年级</span>
						<input id="g1" type="radio" name="grade" value="g1" checked/>
						<label for="g1">全部</label>

						<input id="g2" type="radio" name="grade" value="g2" />
						<label for="g2">小学</label>

						<input id="g3" type="radio" name="grade" value="g3" />
						<label for="g3">初中</label>

						<input id="g4" type="radio" name="grade" value="g4" />
						<label for="g4">高中</label>
					</div>
					<div>
						<span>学科</span>
						<input id="s1" type="radio" name="subject" value="s1" checked/>
						<label for="s1">全部</label>

						<input id="s2" type="radio" name="subject" value="s2" />
						<label for="s2">语文</label>

						<input id="s3" type="radio" name="subject" value="s3" />
						<label for="s3">数学</label>

						<input id="s4" type="radio" name="subject" value="s4" />
						<label for="s4">英语</label>
					</div>
					<div>
						<span>教学经验</span>
						<input id="e1" type="radio" name="experience" value="e1" checked/>
						<label for="e1">全部</label>

						<input id="e2" type="radio" name="experience" value="e2" />
						<label for="e2">一年以内</label>

						<input id="e3" type="radio" name="experience" value="e3" />
						<label for="e3">1-5年</label>

						<input id="e4" type="radio" name="experience" value="e4" />
						<label for="e4">5-10年</label>

						<input id="e5" type="radio" name="experience" value="e5" />
						<label for="e5">10年以上</label>
					</div>
					<div class="form-footer">
						<input type="reset" value="重置" />
						<input type="submit" value="确定" />
					</div>
				</form>
			</div>
			<div class="list">
				<div id="main" class="main">
					<p class="pull_drawing">
						<i class="loading_icon"></i>
						<span class="loading_text">下拉刷新中</span>
					</p>
					<div class="textbg">
						<ul id="data-list">
							<li>
								<div class="row">
									<div class="row_a">
										<div class="row_aa">
											<img class="row_aaa" src="img/qq.jpg" />
											<img class="row_aab" src="img/sex.png" />
										</div>
										<div class="row_ab">
											<div class="row_aba">
												<span>李老师</span>
												<small>36岁</small>
											</div>
											<div class="row_abb">
												<div><img src="img/y.png" /><span>10年</span></div>
												<div><img src="img/s.png" /><span>博士</span></div>
												<div><img src="img/m.png" /><span>100-300/小时</span></div>
											</div>
											<div class="row_abc">
												<span>高中数学老师</span>
											</div>
										</div>
									</div>
									<div class="row_b">
										<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="row_a">
										<div class="row_aa">
											<img class="row_aaa" src="img/qq.jpg" />
											<img class="row_aab" src="img/sex.png" />
										</div>
										<div class="row_ab">
											<div class="row_aba">
												<span>李老师</span>
												<small>36岁</small>
											</div>
											<div class="row_abb">
												<div><img src="img/y.png" /><span>10年</span></div>
												<div><img src="img/s.png" /><span>博士</span></div>
												<div><img src="img/m.png" /><span>100-300/小时</span></div>
											</div>
											<div class="row_abc">
												<span>高中数学老师</span>
											</div>
										</div>
									</div>
									<div class="row_b">
										<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="row_a">
										<div class="row_aa">
											<img class="row_aaa" src="img/qq.jpg" />
											<img class="row_aab" src="img/sex.png" />
										</div>
										<div class="row_ab">
											<div class="row_aba">
												<span>李老师</span>
												<small>36岁</small>
											</div>
											<div class="row_abb">
												<div><img src="img/y.png" /><span>10年</span></div>
												<div><img src="img/s.png" /><span>博士</span></div>
												<div><img src="img/m.png" /><span>100-300/小时</span></div>
											</div>
											<div class="row_abc">
												<span>高中数学老师</span>
											</div>
										</div>
									</div>
									<div class="row_b">
										<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<script type="text/javascript">
					$('#main').refresh({
						pullFunction: function(ms, callback) {
							setTimeout(function() {
								for(var i = 0; i < 5; i++) {
									$('#data-list').append('<li>我是新增的item</li>')
								}
								callback();

							}, ms)
						},
					})
				</script>
				<div class="white"></div>
			</div>
			<div class="footer">
				<div>
					<a href="#">
						<img src="img/f1.png" />
						<span>名师</span>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/f2.png" />
						<span>消息</span>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/f3.png" />
						<span>我的</span>
					</a>
				</div>
			</div>
		</div>
		<script>
			$(document).ready(function() {
				$("#sx").click(function() {
					if($(".formList").is(':hidden')) {
						$("#sx").addClass("sx");
					} else {
						$("#sx").removeClass("sx");
					}
					$(".formList").toggle(300);
				})
				$(".formShadow").click(function() {
					$(".formList").hide(300);
					$("#sx").removeClass("sx");
				})
			})
		</script>
	</body>

</html>